<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>role</title>
    <link rel="stylesheet" type="text/css" href="../lib/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../lib/themes/icon.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	<script type="text/javascript" src="../lib/jquery.min.js"></script>
	<script type="text/javascript" src="../lib/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../lib/datagrid-filter.js"></script>
    <script type="text/javascript" src="../lib/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../lib/jiekou.js"></script>
	<script type="text/javascript" src="../lib/tools.js"></script>
	<script type="text/javascript" src="../lib/base64.js"></script>
	<link href="../lib/mask/jquery.loadmask.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="../lib/mask/jquery.loadmask.min.js"></script>
</head>
<body >

	
	
	<div id="stuwin" class="easyui-window" title="学生信息" closed="true" style="padding:30px 60px; width:40%;height:500px;display: none;">
		<form id="ff" method="post">
			<div  style="margin-bottom:20px">
				<input  type="hidden"  name="id" />
				<input class="easyui-textbox" name="name" id="stuname" style="width:100%" data-options="label:'名字:'">
			</div>
			<div style="margin-bottom:20px">
				<input class="easyui-textbox" name="height" id="stuheight" style="width:100%" data-options="label:'身高:'">
			</div>
			<div  style="margin-bottom:20px">
				<input class="easyui-textbox" name="age" id="stuage" style="width:100%" data-options="label:'年龄:'">
			</div>
			<div style="margin-bottom:20px">
				<select class="easyui-combobox" name="birth" label="籍贯" style="width:100%">
					<option value="1">湖南</option>
					<option value="2">广东</option>
					<option value="3">湖北</option>
					<option value="4">北京</option>
				</select>
			</div>

			<div style="margin-bottom:20px">
				<input class="easyui-checkbox" name="hobby" value="0" label="篮球:"><br><br>
				<input  class="easyui-checkbox" name="hobby" value="1" label="排球:"><br><br>
				<input  class="easyui-checkbox" name="hobby" value="2" label="乒乓球:">
		   </div>
			<hr>
		    <div style="margin-bottom:20px">
				<input class="easyui-radiobutton" name="sex" value="0" label="男:"><br><br>
				<input class="easyui-radiobutton" name="sex" value="1" label="女:">	
	        </div>
			<div  style="margin-bottom:20px;">
				<input  type="hidden"  id="AttachGUID" data="" />
				<input id="fbfile" class="easyui-filebox"  labelPosition="top" data-options="prompt:'请上传头像'" style="width:100%">
			</div>
			<div>
				<input class="easyui-textbox" name="beizhu" style="width:100%;height:60px" data-options="label:'备注:',multiline:true">
			</div>
		<div style="text-align:center;padding:5px 0;margin-top: 10px;">
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清理</a>
		</div>
	</form>

    </div>
	
	<table id="stugrid"></table>
	<div id="stutab">
		<a href="javascript:void(0)" onclick="addstu()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a>
		<a href="javascript:void(0)" onclick="ExporterExcel()" class="easyui-linkbutton" data-options="iconCls:'icon-save'">导出数据csv</a>
	</div>


	<!-- 查看图片 -->
	<div style="display:true;" >
        <div class="datagrid-toolbar" id="imgDataGrid" style="padding:5px" >
            <img src="" id="picture" >
        </div>
    </div>
	<script type="text/javascript">
	

	  var stu={

	  }
	  function addstu() { 
		$("#AttachGUID").attr("data","");
		$("#stuwin").css({"display":"block"});					
		$('#stuwin').window('open');
		$('#ff').form('clear');
	   }
			function lookphoto(param){
				var mm = Base64.decode(param);
				var yy=JSON.parse(mm);
				console.log(yy.logo);

				var img=yy.logo;      
			$('#imgDataGrid').dialog({
				title: 'Logo预览',
				width:400,
				height:400,
				maximized:true,
				resizable:true,
				closed: false,
				cache: false,
				modal: true           
			});
			$("#picture").attr('width',"100%");
			$("#picture").attr('height',"100%");
			$("#picture").attr('src',img);
		}
		$('#fbfile').filebox({
				buttonText: '选择logo',
				buttonAlign: 'left',
				onChange: function (e) {
					var files = $("#fbfile").next().find('input[type=file]')[0].files;
					
					var formData = new FormData();
					formData.append("folder", '数据导入文件');
					// formData.append("guid", guid);
					formData.append('image', files[0]);
                   //upstart
				   $("#stuwin").mask("数据加载中...");
						$.ajax({
						url:Network.geturl("/v1/upload"),
						type: 'POST',
						processData: false,
						contentType: false,
						data: formData,
						error:function(err){
							$("#stuwin").unmask();
							$.messager.alert('提示','请求失败!'+err);	
						},
						success:function(res){
							$("#stuwin").unmask();
							var reslut=res.data[0].url;
							if(reslut){
								$("#AttachGUID").attr("data",reslut);
								
								$.messager.alert('提示','上传成功!');
							}else{
								console.log(res);
								$.messager.alert('提示','shibai!');
							}	
						}
					});

				   //upend
                }
		})
		function submitForm(){
			$("#stuwin").mask("数据加载中...");
			$('#ff').form('submit',{
				iframe: false,
				url:Network.geturl("/v1/addstu"),
				onSubmit: function(param){
					//补充参数
					param.logo=$("#AttachGUID").attr("data");
					return true;	
            	}, 
				success:function(res){
					$("#stuwin").unmask();
					var res = eval('(' + res + ')');
					console.log(res);
				
					if(res.code==200){
						$('#stuwin').window('close');
						$("#stugrid").datagrid("reload");
					} else{
						$.messager.alert('提示','失败啊'+res.msg);
					}

				},
				error:function(result){
					$("#stuwin").unmask();
					console.log("==err");
					console.log(result);
				}

				
			});
			return;

			
			var filename=$("#AttachGUID").attr("data");
			var stuname=$("#stuname").val();
			var stuage=$("#stuage").val();
			var stuheight=$("#stuheight").val();
			console.log(filename,stuage,stuheight,stuname);
					$.ajax({
						url:Network.geturl("/v1/addstu"),
						type:'post',
						data:{
							name:stuname,
							age:stuage+"",
							height:stuheight+"",
							logo:filename+""
							
						},
						error:function(err){
								$.messager.alert('提示','请求失败!'+err);	
						},
						success:function(res){
							if(res.code==200){
								$('#stuwin').window('close');
								$("#stugrid").datagrid("reload");
							} else{
								$.messager.alert('提示','失败啊'+res.msg);
							}
							
						}
					});
			//
		}
        function clearForm(){
			$("#AttachGUID").attr("data","");
			$('#ff').form('clear');
		}
		function deletestu(param){
			var mm = Base64.decode(param);
			var yy=JSON.parse(mm);
          
			$.messager.confirm('确认', "确定要删除吗？", function(r){

						if(r){
							//begin
							$.ajax({
								url:Network.geturl("/v1/delstu"),
								type:'post',
								data:{
									id:yy.id+""
								},
								error:function(err){
										$.messager.alert('提示','请求失败!'+err);	
								},
								success:function(res){
									if(res.code==200){
										
										$("#stugrid").datagrid("reload");
									} else{
										$.messager.alert('提示','失败啊'+res.msg);
									}
									
								}
							});

							//end

						}


			});

		}
		function updatestu(param){
			var mm = Base64.decode(param);
			var yy=JSON.parse(mm);
          
		  yy.hobby=eval('(' + yy.hobby + ')');
		  $("#AttachGUID").attr("data",yy.logo);
		   $('#ff').form('load',yy);
		   $("#stuwin").css({"display":"block"});
		   $('#stuwin').window('open');
		}
		var dg = $("#stugrid").datagrid({
				url:Network.geturl("/v1/liststu"),
				dataType:"json",
				pagination: true,
				rownumbers: true,
				pagination:true,  
				fit:true, 
				nowrap: true, 
				singleSelect:true,
				striped:true,
				fitColumns:true,
				striped:true,
				pageSize:5,
				pageList:[5,10,15],
				frozenColumns:[[
				{field:'id',title:"id序列",width:'15%',align:'center',hidden:true},
					{field:'operation',title:'操作',width:'15%',align:'center',formatter:  
						function(value,row,index){  
							var reslut=JSON.stringify(row);
							reslut=Base64.encode(reslut);
							var html = "";
							html += "&nbsp;<i class=\"fa fa-picture-o\" style=\"color:#0767c8;font-size:16px;\" aria-hidden=\"true\" title=\"查看logo\"  onclick=\"lookphoto('"+reslut+"')\"></i>";
							html += "&nbsp;<i class=\"fa fa-pencil-square-o\" style=\"color:#0767c8;font-size:16px;\" aria-hidden=\"true\" title=\"编辑\"  onclick=\"updatestu('"+reslut+"')\"></i>";
							html += "&nbsp;<i class=\"fa fa-trash\" aria-hidden=\"true\" style=\"color:red;font-size:16px;\" title=\"删除\" onclick=\"deletestu('"+reslut+"')\"></i>"; 
							return html;
							
						}  
					}
				]],
				columns:[[
					{field:'name',title:"名字",width:'20%',align:'center'},
					{field:"height",title:"身高",width:'10%',align:'center'},
					{field:'sex',title:'性别', width:'15%',align:'center',formatter:function(value,row,index){
							if(row.sex == 0){
								return "男";
							}
							return "女";
					}},
					{field:'age',title:'年龄', width:'15%',align:'center'},
					{field:'hobby',title:'爱好', width:'15%',align:'center',formatter:function(value,row,index){
						var arr=eval('(' + row.hobby + ')');
						var result="";
						for(var i = 0; i < arr.length; i++) {
							if(arr[i] == 0){
								result=result+ "篮球,";
							}
							if(arr[i] == 1){
								result=result+"排球,";
							}
							if(arr[i] == 2){
								result=result+ "乒乓球,";
							}
						}
						
							return result;
					}},
					{field:'birth',title:'籍贯', width:'15%',align:'center',formatter:function(value,row,index){
							if(row.birth == 1){
								return "湖南";
							}
							if(row.birth == 2){
								return "广东";
							}
							if(row.birth == 3){
								return "湖北";
							}
							return "北京";
					}},
					{field:'logo',title:'头像', width:'15%',align:'center',formatter:
							function(value,row,index){
								if(row.logo){
									var tt ="<img src="+row.logo+" style=\"width: 80px;height: 80px;\">";
									return tt
								}

							}
						},
						{field:'beizhu',title:'备注', width:'15%',align:'center'}
					
						
					
					]],
					toolbar:"#stutab",
					onLoadError:function(msg){
	
					},
					onLoadSuccess:function(data){
				
					} 
		});

		dg.datagrid({
			remoteFilter:true,
		});
		dg.datagrid('enableFilter');

        // 添加过滤规则开始
		dg.datagrid('enableFilter',[{
			field: "sex",
			type:'combobox',	
			options:{
                panelHeight:'auto',
                data:[{value:'',text:''},{value:'0',text:'男'},{value:'1',text:'女'}],
                onChange:function(value){
                    if (value == ''){
                        dg.datagrid('removeFilterRule', 'sex');
                    } else {
                        dg.datagrid('addFilterRule', {
                            field: 'sex',
                            op: 'equal',
                            value: value
                        });
                    }
                    dg.datagrid('doFilter');
                }
			}}
		]);

      
		
		dg.datagrid('closeFilter',["operation","logo","id","birth"]);


		//获取当前时间，格式YYYY-MM-DD
		function getNowFormatDate() {
			var date = new Date();
			var seperator1 = "-";
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var strDate = date.getDate();
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			if (strDate >= 0 && strDate <= 9) {
				strDate = "0" + strDate;
			}
			var currentdate = year + seperator1 + month + seperator1 + strDate;
			return currentdate;
		}

		//表格导出开始，将json对象导出为CSV文件
		function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
        //如果JSONData不是对象，那么JSON。parse将解析对象中的JSON字符串
          var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData)
                  : JSONData;

          var CSV = '';
          //在第一行或第一行设置报表标题
          CSV += ReportTitle + '\r\n\n';
          //此条件将生成标签/标头
          if (ShowLabel) {
              var row = "";
              //导出的标题
             row = "名字,身高,性别,年龄,籍贯,头像,备注";
              //用换行符追加标签行
              CSV += row + '\r\n';
          }
           //第一个循环是提取每一行
          for (var i = 0; i < arrData.rows.length; i++) {
              var row = "";
			  var xxxx= arrData.rows[i].hobby;
　　　　       //获取需要导出的字段
              row = arrData.rows[i].name+","+arrData.rows[i].height+","+arrData.rows[i].sex+","+arrData.rows[i].age+","+arrData.rows[i].birth+","+arrData.rows[i].logo+","+arrData.rows[i].beizhu;
              row.slice(0, row.length - 1);

              //在每一行之后添加一个换行符
              CSV += row + '\r\n';
          }
          if (CSV == '') {
              alert("无数据");
              return;
          }
          //Generate a file name

　　　//这里我使用了当前时间用来为导出的文件命名
          var fileName = getNowFormatDate();
          fileName += ReportTitle.replace(/ /g, "_");

          //初始化您想要的csv或xls文件格式
          var uri = 'data:text/csv;charset=utf-8,\ufeff' +encodeURI(CSV);  

          var link = document.createElement("a");
          link.href = uri;

          link.style = "visibility:hidden";
          link.download = fileName + ".csv";

          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
    }
		//导出CSV 获取easyui 表格数据
		function ExporterExcel() {
			//获取datagrid对象
		var dg = $("#stugrid");
		//获取所有行
		var rowTmp=$('#stugrid').datagrid('getData');
			if (rowTmp == '')
				return;
			JSONToCSVConvertor(rowTmp, "统计学生详细数据", true);
		}
		//表格导出结束
		
		

	</script>


    
</body>
</html>